<template>
  <view class="monneyserve">
    <!-- 顶部 -->
    <view class="userinfo-top">
      <view class="status-bar"></view>
      <view class="user-nav">
        <view class="user-nav-left">
          <view class="left-back">
            <image src="../../../static/money/money-back.png" mode=""></image>
          </view>
          <view class="left-tit">
            公积金账户详情
          </view>
        </view>
        <view class="user-nav-right">
          <view class="right-three">
            <image src="../../../static/money/solidCircles.png" mode=""></image>
          </view>
          <view class="right-close">
            <image src="../../../static/money/wrong.png" mode=""></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 顶部 -->
    <!-- 个人信息 -->
    <view class="information">
      <view class="item-con">
        <view class="top-tit">
          <view class="box">
          </view>
          <view class="title">
            个人信息
          </view>
        </view>
        <view class="con-item">
          <view class="item" v-for="(item,index) in list">
            <view class="item-left">{{item.name}}</view>
            <view class="item-right">{{item.con}}</view>
          </view>
        </view>
      </view>

      <!-- 个人信息 -->
      <!-- 中心信息 -->
      <!-- <view class="information"> -->
      <view class="item-con">
        <view class="top-tit">
          <view class="box">
          </view>
          <view class="title">
            中心信息
          </view>
        </view>
        <view class="con-item">
          <view class="item" v-for="(item,index) in list1">
            <view class="item-left">{{item.name}}</view>
            <view class="item-right">{{item.con}}</view>
          </view>
        </view>
      </view>

      <!-- </view> -->
      <!-- 账户信息 -->
      <view class="item-con">
        <view class="top-tit">
          <view class="box">
          </view>
          <view class="title">
            中心信息
          </view>
        </view>
        <view class="con-item">
          <view class="item" v-for="(item,index) in list2">
            <view class="item-left">{{item.name}}</view>
            <view class="item-right">{{item.con}}</view>
          </view>
        </view>
      </view>
      <!-- 账户信息 -->
    </view>
    <!-- 中心信息 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
          name: '姓名',
          con: '建设银行'
        }, {
          name: '手机号码',
          con: '12345678901'
        }, {
          name: '个人账户',
          con: '202305847671'
        }, {
          name: '个人账户状态',
          con: '封存'
        }, {
          name: '个人账户余额',
          con: '10.00'
        }],
        list1: [{
          name: '中心编号',
          con: '建设银行'
        }, {
          name: '中心名称',
          con: '12345678901'
        }, {
          name: '单位名称',
          con: '202305847671'
        }, ],
        list2: [{
          name: '姓名',
          con: '建设银行'
        }, {
          name: '手机号码',
          con: '12345678901'
        }, {
          name: '个人账户',
          con: '202305847671'
        }, {
          name: '个人账户状态',
          con: '封存'
        }, {
          name: '个人账户余额',
          con: '10.00'
        }],
      };
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F4F5F6;
  }

  .monneyserve {
    width: 100vw;
  }

  // 顶部
  .userinfo-top {
    width: 100vw;
    height: 140rpx;
    position: fixed;
    z-index: 999;
    overflow: hidden;
    top: 0;
    background-image: linear-gradient(#7495F2, #2047C8);

    .status-bar {
      width: 100vw;
      height: var(--status-bar-height);
    }

    .user-nav {
      width: 90vw;
      margin: 0 auto;
      height: 120rpx;
      height: 88rpx;
      line-height: 88rpx;
      display: flex;
      justify-content: space-between;

      .user-nav-left {
        display: flex;

        .left-back {
          margin-right: 30rpx;

          image {
            width: 40rpx;
            height: 40rpx;
            vertical-align: middle;
          }
        }

        .left-tit {
          color: #fff;
          font-size: 40rpx;
        }
      }

      .user-nav-right {
        display: flex;

        .right-three {
          margin-right: 30rpx;

          image {
            width: 40rpx;
            height: 8rpx;
            vertical-align: middle;
          }
        }

        .right-close {
          image {
            width: 40rpx;
            height: 40rpx;
            vertical-align: middle;
          }
        }
      }
    }
  }

  // 顶部
  // <!-- 个人信息 -->
  .information {
    // margin: 170rpx auto 0rpx auto;
    margin-top: 170rpx;

    .item-con {
      border-radius: 20rpx;
      background-color: #fff;
      // margin-top: 160rpx;
      margin: auto;
      width: 90vw;
      margin-bottom: 30rpx;
    }

    .top-tit {
      padding: 30rpx 5vw;
      display: flex;
      // margin-bottom: 30rpx;

      .box {
        width: 1vw;
        height: 3vh;
        margin-right: 20rpx;
        background-color: #2047C8;
      }

      .title {
        color: #2047C8;
        font-weight: bold;
      }
    }

    .con-item {
      padding: 10rpx 5vw;
      box-sizing: border-box;
      // background-color: #fff;
      line-height: 60rpx;

      .item {
        display: flex;
        justify-content: space-between;

        .item-left {
          color: #949494;
        }

        .item-right {
          color: #3C3C3C;
        }
      }
    }
  }

  // <!-- 个人信息 -->
</style>